<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>逆向分析 - 维修故障排查系统</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="row">
            <div class="col-12">
                <h1 class="mb-4">逆向分析</h1>
            </div>
        </div>
        
        <div class="row">
            <!-- Circuit Diagram Section -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">设备结构图</h5>
                        <div>
                            <button class="btn btn-sm btn-outline-primary" onclick="uploadImage()">
                                <i class="fas fa-upload me-1"></i>上传电路图
                            </button>
                            <input type="file" id="imageUpload" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="circuit-container" class="border rounded" style="height: 400px; position: relative; overflow: hidden;">
                            <div class="text-center text-muted py-5" id="placeholder">
                                <i class="fas fa-image fa-3x mb-3"></i>
                                <p>请上传设备结构图或电路图</p>
                            </div>
                            <img id="circuit-image" style="max-width: 100%; max-height: 100%; display: none;">
                            
                            <!-- Interactive points will be added here -->
                            <div id="analysis-points"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Analysis Panel -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">分析记录</h5>
                    </div>
                    <div class="card-body">
                        <div id="analysis-steps">
                            <div class="mb-3">
                                <label class="form-label">当前分析部件</label>
                                <input type="text" class="form-control" id="current-component" placeholder="点击图中部件选择">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">测量值</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="measurement-value" placeholder="输入测量值">
                                    <select class="form-select" style="max-width: 100px;">
                                        <option>V</option>
                                        <option>A</option>
                                        <option>Ω</option>
                                        <option>Hz</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">分析结果</label>
                                <textarea class="form-control" id="analysis-result" rows="4" 
                                          placeholder="记录分析结果和判断"></textarea>
                            </div>
                            
                            <button class="btn btn-primary w-100" onclick="addAnalysisPoint()">
                                <i class="fas fa-plus me-1"></i>添加分析点
                            </button>
                        </div>
                        
                        <hr>
                        
                        <div id="analysis-history">
                            <h6>分析历史</h6>
                            <div id="history-list" class="list-group">
                                <!-- Analysis history will be populated here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Analysis Summary -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">分析总结</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>故障定位</h6>
                                <textarea class="form-control" rows="3" placeholder="记录最终故障定位"></textarea>
                            </div>
                            <div class="col-md-6">
                                <h6>修复方案</h6>
                                <textarea class="form-control" rows="3" placeholder="记录修复方案"></textarea>
                            </div>
                        </div>
                        <div class="text-end mt-3">
                            <button class="btn btn-success">
                                <i class="fas fa-save me-1"></i>保存分析结果
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="scripts">
        <script>
            let analysisPoints = [];
            let currentPointIndex = 0;
            
            function uploadImage() {
                document.getElementById('imageUpload').click();
            }
            
            function handleImageUpload(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.getElementById('circuit-image');
                        img.src = e.target.result;
                        img.style.display = 'block';
                        document.getElementById('placeholder').style.display = 'none';
                        
                        // Make image interactive
                        img.onclick = handleImageClick;
                    };
                    reader.readAsDataURL(file);
                }
            }
            
            function handleImageClick(event) {
                const img = event.target;
                const rect = img.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;
                
                // Calculate relative position
                const relX = (x / rect.width * 100).toFixed(2);
                const relY = (y / rect.height * 100).toFixed(2);
                
                // Add marker
                addMarker(relX, relY);
                
                // Update current component
                document.getElementById('current-component').value = `部件 ${analysisPoints.length + 1}`;
            }
            
            function addMarker(x, y) {
                const container = document.getElementById('analysis-points');
                const marker = document.createElement('div');
                marker.className = 'analysis-marker';
                marker.style.position = 'absolute';
                marker.style.left = x + '%';
                marker.style.top = y + '%';
                marker.style.width = '20px';
                marker.style.height = '20px';
                marker.style.backgroundColor = 'red';
                marker.style.borderRadius = '50%';
                marker.style.transform = 'translate(-50%, -50%)';
                marker.style.cursor = 'pointer';
                marker.style.zIndex = '1000';
                marker.innerHTML = `<span style="color: white; font-weight: bold; font-size: 12px;">${analysisPoints.length + 1}</span>`;
                
                container.appendChild(marker);
            }
            
            function addAnalysisPoint() {
                const component = document.getElementById('current-component').value;
                const measurement = document.getElementById('measurement-value').value;
                const unit = document.querySelector('#analysis-steps select').value;
                const result = document.getElementById('analysis-result').value;
                
                if (component && measurement && result) {
                    const point = {
                        component: component,
                        measurement: measurement + unit,
                        result: result,
                        timestamp: new Date().toLocaleString()
                    };
                    
                    analysisPoints.push(point);
                    updateHistoryList();
                    
                    // Clear form
                    document.getElementById('current-component').value = '';
                    document.getElementById('measurement-value').value = '';
                    document.getElementById('analysis-result').value = '';
                }
            }
            
            function updateHistoryList() {
                const historyList = document.getElementById('history-list');
                historyList.innerHTML = '';
                
                analysisPoints.forEach((point, index) => {
                    const item = document.createElement('div');
                    item.className = 'list-group-item';
                    item.innerHTML = `
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">${point.component}</h6>
                            <small>${point.timestamp}</small>
                        </div>
                        <p class="mb-1"><strong>测量值:</strong> ${point.measurement}</p>
                        <p class="mb-0"><strong>结果:</strong> ${point.result}</p>
                    `;
                    historyList.appendChild(item);
                });
            }
        </script>
    </div>
</body>
</html>
